import QtQuick
import QtQuick.Controls.Fusion
import QtQuick.Shapes
import Gui.Components

Dialog {
    id: root
    property bool mute: false
    property alias volume: _volumeSlider.value
    background: Item {}
    contentItem: Item {
        implicitWidth: 70
        implicitHeight: _volumeArea.height + _triangle.height
        Rectangle {
            id: _volumeArea
            color: palette.mid
            width: parent.width
            height: 250
            radius: 4
            Item {
                width: parent.width
                anchors.top: parent.top
                anchors.bottom: _bottomAreaVolume.top
                Slider {
                    id: _volumeSlider
                    anchors.top: parent.top
                    anchors.bottom: _volumeLabel.top
                    anchors.margins: 10
                    from: 0
                    to: 100
                    value: 50
                    stepSize: 1
                    orientation: Qt.Vertical
                    anchors.horizontalCenter: parent.horizontalCenter
                    handle: Rectangle {
                        implicitWidth: 16
                        implicitHeight: 16
                        color: palette.highlight
                        radius: width / 2
                        x: parent.leftPadding + Math.round((parent.availableWidth - width) / 2)
                        y: parent.topPadding + Math.round(parent.visualPosition * (parent.availableHeight - height))
                        Label {
                            anchors.centerIn: parent
                            text: "+"
                            font.pixelSize: parent.width
                            visible: _volumeSlider.value === _volumeSlider.to
                        }
                    }
                }
                Label {
                    id: _volumeLabel
                    text: _volumeSlider.value + "%" // 0%
                    anchors.horizontalCenter: parent.horizontalCenter
                    font.pixelSize: 18
                    anchors.bottom: parent.bottom
                    anchors.bottomMargin: 5
                }
                MouseArea {
                    anchors.fill: parent
                    acceptedButtons: Qt.NoButton
                    onWheel: mouse => {
                        const delta = mouse.angleDelta.y / 120;
                        _volumeSlider.value = Math.min(100, Math.max(0, _volumeSlider.value + delta));
                    }
                }
            }
            Item {
                id: _bottomAreaVolume
                width: parent.width
                height: parent.height * 0.2
                anchors.bottom: parent.bottom
                Rectangle {
                    width: parent.width
                    height: 1
                    color: palette.midlight
                }
                FlatIconButton {
                    anchors.centerIn: parent
                    iconName: root.mute ? "mdi.volume-mute" : "mdi.volume-high"
                    iconSize: 25
                    cursorShape: Qt.PointingHandCursor
                    onClicked: {
                        root.mute = !root.mute;
                    }
                }
            }
        }
        Shape {
            id: _triangle
            readonly property real radius: 4
            width: 40
            height: 20
            anchors.top: _volumeArea.bottom
            anchors.horizontalCenter: parent.horizontalCenter
            ShapePath {
                strokeColor: "#292929"
                fillColor: "#292929"
                strokeWidth: 1
                startX: 0
                startY: 0
                PathLine {
                    id: _triangleLine1
                    x: _triangle.width
                    y: 0
                }

                PathLine {
                    id: _triangleLine2
                    x: _triangle.width / 2 + _triangleArc1.radiusX
                    y: _triangle.height - _triangleArc1.radiusX
                }

                PathArc {
                    id: _triangleArc1
                    x: _triangle.width / 2 - _triangleArc1.radiusX
                    y: _triangleLine2.y
                    radiusX: _triangle.radius
                    radiusY: _triangle.radius / 2
                }
            }
        }
    }
}
